<template>
    <el-form class="add-update-preview" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px">
        <template v-if="flag === 'yihurenyuan'">
            <el-form-item label="医护工号" prop="yihugonghao">
                <el-input v-model="ruleForm.yihugonghao" readonly placeholder="医护工号"></el-input>
            </el-form-item>
            <el-form-item label="医护姓名" prop="yihuxingming">
                <el-input v-model="ruleForm.yihuxingming" placeholder="医护姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="医护性别" prop="yihuxingbie">
                <el-select v-model="ruleForm.yihuxingbie" placeholder="请选择医护性别">
                    <el-option v-for="(item, index) in yihurenyuanyihuxingbieOptions" :key="index" :label="item" :value="item"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="照片" prop="zhaopian">
                <file-upload
                    tip="点击上传照片"
                    action="file/upload"
                    :limit="3"
                    :multiple="true"
                    :fileUrls="ruleForm.zhaopian ? ruleForm.zhaopian : ''"
                    @change="yihurenyuanzhaopianUploadChange"
                ></file-upload>
            </el-form-item>
            <el-form-item label="职称" prop="zhicheng">
                <el-input v-model="ruleForm.zhicheng" placeholder="职称" clearable></el-input>
            </el-form-item>
            <el-form-item label="医护等级" prop="yihudengji">
                <el-select v-model="ruleForm.yihudengji" placeholder="请选择医护等级">
                    <el-option v-for="(item, index) in yihurenyuanyihudengjiOptions" :key="index" :label="item" :value="item"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="联系电话" prop="lianxidianhua">
                <el-input v-model="ruleForm.lianxidianhua" placeholder="联系电话" clearable></el-input>
            </el-form-item>
            <el-form-item label="身份证" prop="shenfenzheng">
                <el-input v-model="ruleForm.shenfenzheng" placeholder="身份证" clearable></el-input>
            </el-form-item>
        </template>
        <template v-else-if="flag === 'laoren'">
            <el-form-item label="老人编号" prop="laorenbianhao">
                <el-input v-model="ruleForm.laorenbianhao" readonly placeholder="老人编号" clearable></el-input>
            </el-form-item>
            <el-form-item label="老人姓名" prop="laorenxingming">
                <el-input v-model="ruleForm.laorenxingming" placeholder="老人姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="老人照片" prop="laorenzhaopian">
                <file-upload
                    tip="点击上传老人照片"
                    action="file/upload"
                    :limit="3"
                    :multiple="true"
                    :fileUrls="ruleForm.laorenzhaopian ? ruleForm.laorenzhaopian : ''"
                    @change="laorenlaorenzhaopianUploadChange"
                ></file-upload>
            </el-form-item>
            <el-form-item label="老人性别" prop="laorenxingbie">
                <el-select v-model="ruleForm.laorenxingbie" placeholder="请选择老人性别">
                    <el-option v-for="(item, index) in laorenlaorenxingbieOptions" :key="index" :label="item" :value="item"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="老人年龄" prop="laorennianling">
                <el-input v-model="ruleForm.laorennianling" placeholder="老人年龄" clearable></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="lianxidianhua">
                <el-input v-model="ruleForm.lianxidianhua" placeholder="联系电话" clearable></el-input>
            </el-form-item>
            <el-form-item label="家属姓名" prop="jiashuxingming">
                <el-input v-model="ruleForm.jiashuxingming" placeholder="家属姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="关系" prop="guanxi">
                <el-input v-model="ruleForm.guanxi" placeholder="关系" clearable></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="shoujihao">
                <el-input v-model="ruleForm.shoujihao" placeholder="手机号" clearable></el-input>
            </el-form-item>
            <el-form-item label="家庭住址" prop="jiatingzhuzhi">
                <el-input v-model="ruleForm.jiatingzhuzhi" placeholder="家庭住址" clearable></el-input>
            </el-form-item>
        </template>
        <el-form-item v-else-if="flag === 'users'" label="用户名" prop="username">
            <el-input v-model="ruleForm.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onUpdateHandler"> 修 改 </el-button>
        </el-form-item>
    </el-form>
</template>

<script>
// 数字，邮件，手机，url，身份证校验
import { rules, isNumber, isIntNumer, isEmail, isMobile, isPhone, isURL, checkIdCard } from '@/utils/validate';

export default {
    computed: {
        rules() {
            return rules;
        },
    },
    data() {
        return {
            ruleForm: {},
            flag: '',
            usersFlag: false,
            yihurenyuanyihuxingbieOptions: [],
            yihurenyuanyihudengjiOptions: [],
            laorenlaorenxingbieOptions: [],
        };
    },
    mounted() {
        var table = this.$storage.get('sessionTable');
        this.flag = table;
        this.$http({
            url: `${this.$storage.get('sessionTable')}/session`,
            method: 'get',
        }).then(({ data }) => {
            if (data && data.code === 0) {
                this.ruleForm = data.data;
            } else {
                this.$message.error(data.msg);
            }
        });
        this.yihurenyuanyihuxingbieOptions = '男,女'.split(',');
        this.$http({
            url: `option/yihudengji/yihudengji`,
            method: 'get',
        }).then(({ data }) => {
            if (data && data.code === 0) {
                this.yihurenyuanyihudengjiOptions = data.data;
            } else {
                this.$message.error(data.msg);
            }
        });
        this.laorenlaorenxingbieOptions = '男,女'.split(',');
    },
    methods: {
        yihurenyuanzhaopianUploadChange(fileUrls) {
            this.ruleForm.zhaopian = fileUrls;
        },
        laorenlaorenzhaopianUploadChange(fileUrls) {
            this.ruleForm.laorenzhaopian = fileUrls;
        },
        async onUpdateHandler() {
            const valid = await this.$refs['ruleForm'].validate();
            if (!valid) return;
            if (this.ruleForm.zhaopian) {
                this.ruleForm.zhaopian = this.ruleForm.zhaopian.replace(new RegExp(this.$base.url, 'g'), '');
            }
            if ('yihurenyuan' === this.flag && !isMobile(this.ruleForm.lianxidianhua)) {
                this.$message.error(`联系电话应输入手机格式`);
                return;
            }
            if ('yihurenyuan' === this.flag && !checkIdCard(this.ruleForm.shenfenzheng)) {
                this.$message.error(`身份证应输入身份证格式`);
                return;
            }
            if (this.ruleForm.laorenzhaopian) {
                this.ruleForm.laorenzhaopian = this.ruleForm.laorenzhaopian.replace(new RegExp(this.$base.url, 'g'), '');
            }
            if ('laoren' === this.flag && !isMobile(this.ruleForm.lianxidianhua)) {
                this.$message.error(`联系电话应输入手机格式`);
                return;
            }
            this.$http({
                url: `${this.$storage.get('sessionTable')}/update`,
                method: 'post',
                data: this.ruleForm,
            }).then(({ data }) => {
                if (data && data.code === 0) {
                    this.$message({
                        message: '修改信息成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {},
                    });
                } else {
                    this.$message.error(data.msg);
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped></style>
